<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="handleCreate"> 新增 </a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'ant-design:save-outlined',
            tooltip: '保存',
            onClick: handleSave.bind(null, record),
            ifShow: !record.id,
          },
          {
            icon: 'clarity:note-edit-line',
            tooltip: '修改',
            onClick: handleEdit.bind(null, record),
            ifShow: !!record.id,
          },
          {
            icon: 'ant-design:delete-outlined',
            tooltip: '删除',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDelete.bind(null, record),
            },
            ifShow: !!record.id,
          },
        ]"
      />
    </template>
    <template #footer>
      <div class="text-center pt-2 pb-2">
        注意：图片格式为level + "1-9"+".gif" ，如：level1.gif。
      </div>
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns } from './userLevel.data';
  import {
    getConfigEditUserLevelPage,
    getConfigCreateUserLevel,
    getConfigUpdateUserLevel,
    getConfigDelUserLevel,
  } from '/@/api/flowManage/flowManage';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';

  export default defineComponent({
    name: 'UserLevel',
    components: { BasicTable, TableAction },
    setup() {
      const { createMessage } = useMessage();
      const [registerTable, { reload, setProps, getDataSource }] = useTable({
        title: '',
        api: getConfigEditUserLevelPage,
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: [],
          autoSubmitOnEnter: true,
        },
        useSearchForm: false,
        showTableSetting: false,
        bordered: true,
        showIndexColumn: false,
        canResize: false,
        pagination: false,
        scroll: { y: window?.innerHeight - 300 },
        // showHeader: false,
        afterFetch: (data) => {
          return data.map((item, index) => {
            return { ...item, id: index + 1, newLevel: item.level, levelPicPath: item.picPath };
          });
        },
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

      const handleEdit = async (record) => {
        if (!record['level']) {
          return createMessage.warning('在线时长不能为空');
        }
        if (!record['levelPicPath']) {
          return createMessage.warning('图片不能为空');
        }
        try {
          setProps({ loading: true });
          await getConfigUpdateUserLevel(record);
          createMessage.success('操作成功');
          reload();
        } finally {
          setProps({ loading: false });
        }
      };

      const handleDelete = async (record) => {
        try {
          setProps({ loading: true });
          await getConfigDelUserLevel(record);
          createMessage.success('操作成功');
          reload();
        } finally {
          setProps({ loading: false });
        }
      };

      const handleCreate = () => {
        const data = getDataSource();
        data.push({});
      };
      //新增
      const handleSave = async (record) => {
        console.log('handleSave');
        const params = cloneDeep(record);
        params.level = params.newLevel;
        if (!params['level']) {
          return createMessage.warning('在线时长不能为空');
        }
        if (!params['levelPicPath']) {
          return createMessage.warning('图片不能为空');
        }
        try {
          setProps({ loading: true });
          await getConfigCreateUserLevel(params);
          createMessage.success('操作成功');
          reload();
        } finally {
          setProps({ loading: false });
        }
      };
      return {
        registerTable,
        handleEdit,
        handleDelete,
        handleCreate,
        handleSave,
      };
    },
  });
</script>
